<template>
  <div style="height: 600px; background-color: white" class="showP">
    <el-page-header
      @back="goBack"
      content="商品页面"
      title="返回首页"
      style="margin-left: -200px; margin-bottom: 100px"
    >
    </el-page-header>
    <el-row>
      <el-col :span="6">
        <div class="grid-content">
          <el-image :src="src" style="width: 300px; height: 300px">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>商品属性</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="open">购买</el-button>
          </div>
          <div class="text item">
            {{ "商品名称:" +  goods_name}}
          </div>
          <div class="text item">
            {{ "商品价格:" +  goods_price}}
          </div>
          <div class="text item">
            {{ "商品类型:" +  goods_type}}
          </div>
          <div class="text item">
            {{ "店铺名称:" +  market_name}}
          </div>
          <div class="text item">
            <el-radio v-model="radio" label="S">S</el-radio>
            <el-radio v-model="radio" label="M">M</el-radio>
            <el-radio v-model="radio" label="L">L</el-radio>
            <el-radio v-model="radio" label="XL">XL</el-radio>
            <el-radio v-model="radio" label="XXL">XXL</el-radio>
          </div>
          <div class="text item">
            购买数量:
            <el-button type="primary" @click="incrementNum">+</el-button><el-input v-model="goods_num" style="width:60px" type="number"></el-input><el-button type="primary" @click="descNum">-</el-button>
          </div>
          <div class="text item">
              收获地址：
              <el-input type="text" placeholder="河北省沙河市新城镇北掌村" style="width:300px" v-model="address"></el-input>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.showP {
  padding-left: 200px;
}
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>
<script>
export default {
  data() {
    return {
      src: this.$route.params.goods_url,
      goods_id:this.$route.params.goods_id,
      goods_name:this.$route.params.goods_name,
      goods_price:this.$route.params.goods_price,
      goods_type:this.$route.params.goods_type,
      market_name:this.$route.params.market_name,
      goods_num:1,
      radio:'XL',
      address:'河北省沙河市新城镇北掌村'
    };
  },
  methods: {
    goBack() {
      this.$router.push("/");
    },
     open() {
       if(this.$store.state.username==""){
         this.$router.push('/login');
       }else{
        this.$confirm('点击确定支付'+this.goods_price*this.goods_num+'元 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let goods_price = this.goods_price*this.goods_num;
          let goodsInfo = {
            'username':this.$store.state.username,
            "userID":this.$store.state.userID,
            'goodsID':this.goods_id,
            'goodsName':this.goods_name,
            'goodsModel':this.radio,
            'goodsprice':goods_price,
            'goods_num':this.goods_num,
            'goods_date':new Date().getFullYear()+"-"+(new Date().getMonth()+1)+"-"+new Date().getDate()+" "+new Date().getHours()+":"+new Date().getMinutes(),
            'goods_type':this.goods_type,
            'market_name':this.market_name,
            'address':this.address
          }
          this.axios.post("/api/shopping/purcharseGoods.php",goodsInfo).then(res=>{
              if(res.data=="ok"){
                this.$message({
                  type:'success',
                  message:'支付成功'
                });
              }else if(res.data=="商品库存不足"){
                alert(res.data);
              }else{
                this.$message({
                   type: 'success',
                   message: '服务器繁忙，稍后重试'
                });
              }
            });
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消支付'
          });          
          });
        }
      },
      incrementNum(){
        this.goods_num++;
      },
      descNum(){
        if(this.goods_num==0 || this.goods_num<0){
              alert("至少购买一件");
              this.goods_num=1;
        }else{
          this.goods_num--;
        }
      }
  },
};
</script>